import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    header: {
        height: 60,
        backgroundColor: '#1e3a8a',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        overflow: 'hidden',
    },
    headerBackground: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: '100%',
        height: '100%',
    },
    headerContent: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
        zIndex: 1,
        width: '100%',
        position: 'relative',
    },
    headerText: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#ffffff',
        textShadowColor: 'rgba(0, 0, 0, 0.3)',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 2,
        flex: 1,
        textAlign: 'center',
    },
    backButton: {
        position: 'absolute',
        left: 20,
        top: 14.5,
        zIndex: 2,
        width: 32,
        backgroundColor: '#ffffff',
        borderRadius: 16,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
    },
    backIcon: {
        width: 24,
        height: 24,
    },
    content: {
        flex: 1,
        padding: 10,
    },
    title: {
        fontSize: 24,
        color: '#333',
        textAlign: 'center',
        marginBottom: 10,
        fontWeight: 'bold',
    },

    // 搜索区域样式
    searchContainer: {
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 10,
        marginBottom: 10,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 3,
    },
    searchRow: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        gap: 10,
        flexWrap: 'wrap',
    },
    searchItem: {
        flex: 0,
        minWidth: 140,
        flexDirection: 'row',
        alignItems: 'center',
        gap: 2,
    },
    searchLabel: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
        minWidth: 70,
    },
    searchLabel2: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
        minWidth: 40,
    },
    searchLabel1: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
        minWidth: 50,
    },
    searchInputContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#d9d9d9',
        borderRadius: 6,
        paddingHorizontal: 12,
        paddingVertical: 6,
        backgroundColor: '#fff',
        height: 32,
        minWidth: 120,
        flex: 0,
    },
    searchIcon: {
        width: 16,
        height: 16,
        marginRight: 8,
        resizeMode: 'contain',
    },
    searchInput: {
        // flex: 1,
        fontSize: 14,
        color: '#333',
        height: 20,
        padding: 0,
        margin: 0,
    },
    dateSelector: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderWidth: 1,
        borderColor: '#d9d9d9',
        borderRadius: 6,
        paddingHorizontal: 12,
        paddingVertical: 6,
        backgroundColor: '#fff',
        height: 32,
        minWidth: 120,
        flex: 0,
    },
    dateText: {
        fontSize: 14,
        color: '#333',
        flex: 1,
    },
    arrowIcon: {
        width: 16,
        height: 16,
        marginLeft: 8,
    },
    stateSelector: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderWidth: 1,
        borderColor: '#d9d9d9',
        borderRadius: 6,
        paddingHorizontal: 12,
        paddingVertical: 6,
        backgroundColor: '#fff',
        height: 32,
        minWidth: 100,
        maxWidth: 120,
        flex: 0,
    },
    stateText: {
        fontSize: 14,
        color: '#333',
        flex: 1,
    },
    stateDropdownContainer: {
        position: 'relative',
        flex: 0,
        minWidth: 100,
        maxWidth: 120,
    },
    buttonRow: {
        flexDirection: 'row',
        gap: 10,
        flexShrink: 0,
        minWidth: 100,
    },
    searchButton: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#1890ff',
        paddingHorizontal: 20,
        paddingVertical: 8,
        borderRadius: 6,
        minWidth: 50,
        justifyContent: 'center',
    },
    searchButtonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '500',
    },
    resetButton: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#d9d9d9',
        paddingHorizontal: 20,
        paddingVertical: 8,
        borderRadius: 6,
        minWidth: 50,
        justifyContent: 'center',
    },
    resetButtonText: {
        color: '#666',
        fontSize: 16,
        fontWeight: '500',
    },

    // 表格样式
    tableContainer: {
        backgroundColor: '#fff',
        borderRadius: 8,
        marginBottom: 0,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 3,
    },
    tableHeader: {
        flexDirection: 'row',
        backgroundColor: '#fafafa',
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    tableHeaderCell: {
        flex: 1,
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderRightWidth: 1,
        borderRightColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
    },
    tableHeaderCellSmall: {
        flex: 0.8,
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderRightWidth: 1,
        borderRightColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
    },
    tableHeaderCellLarge: {
        flex: 1.5,
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderRightWidth: 1,
        borderRightColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
    },
    tableHeaderCellExtraLarge: {
        flex: 1.8,
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderRightWidth: 1,
        borderRightColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
    },
    tableBody: {
        maxHeight: 400,
    },
    tableRow: {
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    tableCell: {
        flex: 1,
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderRightWidth: 1,
        borderRightColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: 44,
    },
    tableCellSmall: {
        flex: 0.8,
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderRightWidth: 1,
        borderRightColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: 44,
    },
    tableCellLarge: {
        flex: 1.5,
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderRightWidth: 1,
        borderRightColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: 44,
    },
    tableCellExtraLarge: {
        flex: 1.8,
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderRightWidth: 1,
        borderRightColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: 44,
    },
    loadingContainer: {
        padding: 40,
        alignItems: 'center',
    },
    loadingText: {
        fontSize: 16,
        color: '#666',
    },
    noDataContainer: {
        padding: 40,
        alignItems: 'center',
    },
    noDataText: {
        fontSize: 16,
        color: '#999',
    },

    // 分页样式
    paginationContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        flexWrap: 'wrap',
        gap: 8,
        paddingVertical: 16,
    },
    pageButton: {
        paddingHorizontal: 12,
        paddingVertical: 8,
        borderWidth: 1,
        borderColor: '#d9d9d9',
        borderRadius: 4,
        backgroundColor: '#fff',
        minWidth: 36,
        alignItems: 'center',
    },
    pageButtonActive: {
        backgroundColor: '#1890ff',
        borderColor: '#1890ff',
    },
    pageButtonDisabled: {
        backgroundColor: '#f5f5f5',
        borderColor: '#d9d9d9',
    },
    pageButtonText: {
        fontSize: 14,
        color: '#666',
    },
    pageButtonTextActive: {
        color: '#fff',
    },
    pageButtonTextDisabled: {
        color: '#ccc',
    },
    pageEllipsis: {
        paddingHorizontal: 8,
        color: '#666',
        fontSize: 14,
    },
    totalInfoText: {
        fontSize: 14,
        color: '#666',
        marginLeft: 16,
    },

    // 模态框样式
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalContainer: {
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 20,
        width: '80%',
        maxWidth: 300,
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333',
        textAlign: 'center',
        marginBottom: 20,
    },
    modalOption: {
        paddingVertical: 12,
        paddingHorizontal: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    modalOptionText: {
        fontSize: 16,
        color: '#333',
        textAlign: 'center',
    },
    modalCancelButton: {
        marginTop: 16,
        paddingVertical: 12,
        paddingHorizontal: 16,
        backgroundColor: '#f5f5f5',
        borderRadius: 6,
        alignItems: 'center',
    },
    modalCancelButtonText: {
        fontSize: 16,
        color: '#666',
    },
});
